<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="资讯详情" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="contain-view" :style="{height:setcollapseheight() + 'px'}">
			<view class="title">
				<view class="line"></view>
				{{ article.title }}
			</view>
			<view class="publish">
				发布人：{{userName}}
			</view>
			<view class="time">
				发布时间：{{article.createTime}}
			</view>
			<view class="content">
				<view v-html='article.introduce'></view>
				<view v-html="article.content"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import techArticleApi from '@/api/socialized-servce/breed-aquatics/tech-article/index.js'
	export default {
		data() {
			return {
				article: {},
				hasSigned: false,
				signing: false,
				articleObj: {},
				id: '',
				userName: '',
				type: ''
			}
		},
		onPullDownRefresh() {
			this.param = {
				page: 1,
				size: 5,
				total: 0
			}
			this.loadDataList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			this.type = e.str
			// const data = JSON.parse(e.data)
			this.id = JSON.parse(e.id)
		},
		onShow() {
			this.loadArticle()
		},
		methods: {
			loadArticle() {
				techArticleApi.queryById({
					id: this.id
				}).then(res => {
					this.article = res.data
					this.userName = res.data.user.userName
					this.hasSigned = res.data.userThumpUp == 1
				})
			},
			// 点赞
			signFn(id) {
				if (this.signing) return
				this.signing = true
				if (!this.hasSigned) {
					techArticleApi.thumpUp(id).then(res => {
						this.hasSigned = true
						uni.showToast({
							title: '点赞成功',
							icon: 'none'
						})
						// this.loadArticle()
						this.article.thumpupNum++
						this.signing = false
					})
				} else {
					techArticleApi.thumpUpCancel(id).then(res => {
						this.hasSigned = false
						uni.showToast({
							title: '取消点赞成功',
							icon: 'none'
						})
						this.article.thumpupNum--
						this.signing = false
					})
				}
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(60)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				if(this.type === 'home'){
					uni.reLaunch({
						url: '/pages/socialized-service/selection-system/selection-system'
					})
				} else if (this.type === 'center'){
					uni.reLaunch({
						url: '/pages/socialized-service/index-message/index-message'
					})
				} else {
					uni.redirectTo({
						url: '/subPage1/socialized-service/market-information/industry-information/industry-information'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}

		.contain-view {
			margin: 0 30rpx;
			padding: 20rpx 40rpx;
			position: relative;
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;

			.title {
				position: relative;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #91743E;
				.line {
					position: absolute;
					left: -20rpx;
					top: 8rpx;
					width: 10rpx;
					height: 28rpx;
					background-color: #91743E;
				}
			}
			.publish {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: Arial-Regular, Arial;
				font-weight: 400;
				color: #606060;
			}
			.time {
				font-size: 28rpx;
				font-family: Arial-Regular, Arial;
				font-weight: 400;
				color: #606060;
			}

			.co {
				color: #707273;
				margin-top: 10rpx;
			}

			.content {
				margin-top: 20rpx;
				font-size: 32rpx;
				text-indent: 64rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #434343;
				height: calc(100% - 110px);
				overflow: auto;

				::v-deep img {
					display: block;
					max-width: 100%;
				}

				::v-deep .ql-video {
					display: block;
					max-width: 100%;
				}
			}
		}

		.sign {
			height: 100rpx;
			margin-top: 50rpx;
			text-align: center;

			.img {
				width: 100rpx;
				height: 100%;
			}
		}
	}
</style>